<template>
<el-container id="el-container-view">
  <el-aside
  :style="{'width': '200px'}"
    :class="[!isMenuCollapse ? 'widthAuto':'']"
    >
    <viewSide/>
  </el-aside>
  <el-main id="el-main-view">
  <router-view></router-view>
  </el-main>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import viewSide from "./views/Aside.vue"

export default defineComponent({
  components:{
    viewSide,
  },
  mounted() {
    const isMenuCollapse = this.$store.state.menu.isMenuCollapse

    return {
      isMenuCollapse,
    }
  },
  computed: {
    isMenuCollapse(){
      console.log(!this.$store.state.menu.isMenuCollapse)
      return !this.$store.state.menu.isMenuCollapse
    }
  }
})
</script>

<style scoped>
el-container:deep(.widthAuto) {
  width: auto!important;
}
</style>